<template>
  <div class="nil-drawer">
    <el-scrollbar class="nil-drawer-body">
      <el-form ref="form" :model="formData" label-width="120px">
        <el-form-item label="快速填写" v-if="!isChange">
          <el-select
            v-model="menusHintValSelect"
            placeholder="请选择菜单"
            style="width: 100%"
            @change="menuHintSelect"
          >
            <el-option
              v-for="(item, index) in innerMenus"
              :key="index"
              :label="item.name"
              :value="index"
            >
              <span style="float: left">{{ item.name }}</span>
              <span
                style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
                >{{ item.children ? "父级" : "" }}</span
              >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单名称">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>

        <el-form-item label="菜单图标">
          <el-select
            v-model="formData.icon"
            placeholder="Select"
            style="width: 100%"
            filterable
          >
            <template #prefix>
              <div style="color: #409eff">
                <i :class="[iconfont.font_family, formData.icon]"></i>
              </div>
            </template>
            <div class="icons">
              <el-option
                v-for="item in iconfont.glyphs"
                :key="item.icon_id"
                :label="item.name"
                :value="`${iconfont.css_prefix_text}${item.font_class}`"
              >
                <div class="item">
                  <i
                    :class="`${iconfont.font_family} ${iconfont.css_prefix_text}${item.font_class}`"
                  ></i>
                  <div class="iconName">{{ item.name }}</div>
                </div>
              </el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select
            v-model="formData.pid"
            placeholder="请选择菜单"
            style="width: 100%"
          >
            <el-option
              v-for="item in innerTopMenus"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
              <span
                style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
                >{{ item.children ? "父级" : "" }}</span
              >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="菜单路径">
          <el-input v-model="formData.path"></el-input>
        </el-form-item>

        <el-form-item label="排序">
          <el-input v-model="formData.sort" type="number"></el-input>
        </el-form-item>

        <el-form-item label="ID">
          <el-input disabled v-model="formData.id"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button :loading="loading" type="primary" @click="save">{{
            isChange ? "修改" : "创建"
          }}</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { asyncRoutes } from "@/router";
import { onMounted, reactive, ref } from "vue";

const props = defineProps({
  loading: Boolean,
  isChange: Boolean,
  topMenus: Array,
  iconfont: Object,
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const formData = reactive(props.data);

const emit = defineEmits(["save", "change", "cancel"]);

function save() {
  if (props.isChange) {
    emit("change", formData);
  } else {
    emit("save", formData);
  }
}

function cancel() {
  emit("cancel");
}

// 打平数据
function filterAsyncRoutesHint(asyncRoutes) {
  const res = [];
  asyncRoutes.forEach((route) => {
    const tmp = { ...route };
    res.push({
      name: tmp.meta.title,
      path: tmp.path,
      children: !!tmp?.children,
    });
    if (tmp.children) {
      let temp = filterAsyncRoutesHint(tmp.children);
      res.push(...temp);
    }
  });
  return res;
}

function filterTopMenusHint(asyncRoutes) {
  const res = [];
  asyncRoutes.forEach((route) => {
    const tmp = { ...route };
    res.push({
      ...tmp,
      children: !!tmp?.children,
    });
    if (tmp.children) {
      let temp = filterTopMenusHint(tmp.children);
      res.push(...temp);
    }
  });
  return res;
}

const menusHintValSelect = ref();
const innerMenus = ref([]);
const innerTopMenus = ref([]);
onMounted(() => {
  innerMenus.value = filterAsyncRoutesHint(asyncRoutes);
  innerTopMenus.value.push({ id: "0", name: "无上级菜单" });
  innerTopMenus.value.push(...filterTopMenusHint(props.topMenus));
});

function menuHintSelect(val) {
  const temp = innerMenus.value[val];
  formData.name = temp.name || "";
  formData.path = temp.path || "";
}
</script>

<style lang="scss">
.icons {
  grid-template-columns: repeat(6, 1fr);
  padding: 5px 5px;
  display: grid;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  .el-select-dropdown__item {
    height: auto;
    padding: 0;
  }
  .item {
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0);
    color: #999;
    border-radius: 5px;
    height: 60px;
    transition: all 0.4s;
    padding: 5px 5px;

    i {
      font-size: 18px;
    }

    .iconName {
      font-size: 12px;
    }
  }
}
</style>
